<script>
export default {
  render(h) {
    let that = this;
    let ths = [];
    let trs =[];
    
    this.currentData.forEach( (row) => {
      let tds = [];
      that.currentColumns.forEach( (cell) => {
        tds.push(h('td', row[cell.key]));
      })
      trs.push(h('tr', tds))
    })
    //组装表头
    this.currentColumns.forEach( (col, index) => {
      if(col.sortable) {
        ths.push(
          h(
            'th',
            [
              h(
                'span',
                col.title
              ),
              //升序
              h(
                'a',
                {
                  class: {
                    on: col._sortType === 'asc'
                  },
                  on: {
                    click() {
                      that.handleSortByAsc(index)
                    }
                  }
                },
                '↑'
              ),
              //降序
              h(
                'a',
                {
                  class: {
                    on: col._sortType === 'desc'
                  },
                  on: {
                    click() {
                      that.handleSortByDesc(index)
                    }
                  }
                },
                '↓'
              )
            ]
          )
        )
      }else {
        ths.push(
          h(
            'th',
            col.title
          )
        )
      }
    })
    return h(
      'table',
      [
        h(
          'thead',
          [
            h('tr',ths)
          ]
        ),
        h('tbody',trs)
      ]
    )
  },
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      title: 'table组件',
      currentColumns: [],
      currentData: [],
    }
  },
  methods: {
    makeColumns() {
      this.currentColumns = this.columns.map( (col, index) => {
        //标识当前排序状态
        col._sortType = 'normal';
        col.index = index;
        return col;
      });
    },
    makeData() {
      this.currentData = this.data.map( (row, index) => {
        row._index = index;
        return row;
      });
    },
    handleSortByAsc(index) {
      let key = this.currentColumns[index].key;
      this.currentColumns.forEach( (col) => {
        col._sortType = 'normal'
      });
      this.currentColumns[index]._sortType = 'asc';

      this.currentData.sort( (a, b) => {
        return a[key] > b[key] ? 1 : -1;
      });
    },
    handleSortByDesc(index) {
      let key = this.currentColumns[index].key;
      this.currentColumns.forEach( (col) => {
        col._sortType = 'normal';
      });
      this.currentColumns[index]._sortType = 'desc';
      this.currentData.sort( (a, b) => {
        return a[key] < b[key] ? 1 : -1;
      });
    }
  },
  watch: {
    data() {
      this.makeData();
      let sortedColumn = this.currentColumns.filter( (col) => {
        return col._sortType !== 'normal';
      });

      if(sortedColumn.length > 0) {
        if(sortedColumn[0]._sortType === 'asc') {
          this.handleSortByAsc(sortedColumn[0]._index);
        }else {
          this.handleSortByDesc(sortedColumn[0]._index);
        }
      }
    }
  },
  mounted() {
    //初始化时调用
    this.makeColumns();
    this.makeData();
  }
}
</script>

<style lang="less" scoped>
.on {
  color: red;
}
</style>